<template>
    <div class="login" @keydown.enter="handleSubmit">

        <div class="login-logo">
            <img src="../../static/images/login/logo2.png">
        </div>

        <div class="content">
            <div class="picLeft">
                <div class="picLeft1">
                    <div style="margin:0 14px 14px 0;">
                        <img src="../../static/images/login/login7.png" style="width:182px;margin-right:6px;">
                        <img src="../../static/images/login/in.png" style="width:118px">
                    </div>
                    <div class="">
                        <img class="verTop" src="../../static/images/login/outbound.png" style="width:118px;margin-right:6px;">
                        <img src="../../static/images/login/login6.png" style="width:186px;">
                    </div>
                </div>
                <div class="picLeft1" style="margin-right:14px;">
                    <div>
                        <img class="verTop" src="../../static/images/login/login4.png" style="width:130px;height:247px">
                    </div>
                </div>
                <div class="picLeft1">
                    <div class="" style="margin:0 14px 14px 0;">
                        <img src="../../static/images/login/login3.png" style="width:118px">
                        <img class="verTop" src="../../static/images/login/suohao.png" style="width:118px;margin:0 6px;">
                        <img src="../../static/images/login/login8.png" style="width:118px">
                    </div>
                    <div class="">
                        <img src="../../static/images/login/login5.png" style="width:248px;margin-right:6px;">
                        <img class="verTop" src="../../static/images/login/back.png" style="width:118px;height: 114px;">
                    </div>
                </div>
            </div>


            <div class="login-con">
                <Card :bordered="false">
                    <p slot="title">用户登录</p>
                    <div class="form-con">
                        <Form ref="loginForm" :model="form" :rules="rules">
                            <FormItem prop="username">
                                <Input v-model="form.username" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                                </Input>
                            </FormItem>
                            <FormItem prop="password">
                                <Input type="password" v-model="form.password" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                                </Input>
                            </FormItem>
                            <FormItem>
                                <Button :loading="loading"  @click="handleSubmit" type="primary" long >登录</Button>
                            </FormItem>
                        </Form>
                    </div>
                </Card>
            </div>
        </div>


    </div>
</template>

<script>
import Cookies from 'js-cookie';
import {login} from '@/api/login/login'
import axios from 'axios';

export default {
    data () {
        return {
            form: {
                username: '',  // 13665804950  13082864691
                password: ''   //159753
            },
            loading: false,
            rules: {
                username: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        handleSubmit () {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading=true;
                    login({
                        username:this.form.username,
                        password:this.form.password
                    }).then((res) => {
                        this.loading=false;
                        if(res.data.error=='0'){
                           /* Cookies.set('user', this.form.username);
                            Cookies.set('password', this.form.password);
                            Cookies.set('userName', res.data.user.realname);
                            Cookies.set('session', res.data.JSESSIONID);*/

                            localStorage.setItem('user', this.form.username);
                            localStorage.setItem('password', this.form.password);
                            localStorage.setItem('userName', res.data.user.realname);
                            localStorage.setItem('session', res.data.JSESSIONID);


                             this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
                             // this.$router.push({name: 'home_index'});
                            this.$router.push({path: 'home/index'});
                        }else{
                            this.$Message.error(res.data.message);
                        }
                    })
                }
            });
        }
    }
};
</script>

<style lang="less">
    .login{
        width:100%;
        height: 100%;
        background:url('../../static/images/login/login-bg.png');
        background-size: cover;
        .content{
            width: 1200px;
            zoom: 1;
            display: flex;
            margin:0 auto;
            &:after{
                content: '';
                display: block;
                clear: both;
            }
            .picLeft {
                margin-right: 30px;
                .picLeft1{
                    float: left;
                }
                img{
                    border-radius: 4px;
                }
            }
        }
        .login-con{
            width: 300px;
            &-header{
                font-size: 16px;
                font-weight: 300;
                text-align: center;
                padding: 30px 0;
            }
            .form-con{
                padding: 10px 0 0;
            }
            .login-tip{
                font-size: 10px;
                text-align: center;
                color: #c3c3c3;
            }
        }
        .login-logo{
            text-align: center;
            padding: 70px 0 100px;
            img{
                width:663px;
                height: 130px;
            }
        }
    }
</style>
